<template>
  <div>
    <h1>商铺列表</h1>
    <div class="container">
      <!-- 头部 -->
      <el-card class="top">
        <el-breadcrumb>
          <el-breadcrumb-item>一级菜单</el-breadcrumb-item>
          <el-breadcrumb-item>二级菜单</el-breadcrumb-item>
          <el-breadcrumb-item>三级菜单</el-breadcrumb-item>
        </el-breadcrumb>

      </el-card>
      <el-card class="top1">
        <el-row class="nav1">
          <el-col :span="24">商品列表</el-col>
        </el-row>
        <el-row type="flex" justify="space-around" class="nav2">
          <el-col :span="9">
            <span>店铺名：</span><el-input v-model="input" placeholder="请输入内容" size="mini" @blur="search" />
          </el-col>
          <el-col :span="9">
            <span>行业：</span>
            <el-select v-model="value" filterable size="medium" placeholder="请选择" class="input">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" size="mini" @click="search">查询</el-button><el-button size="mini">重置</el-button>
          </el-col>
        </el-row>
        <el-row class="nav3">
          <el-col :span="24">
            <el-button type="primary" size="mini" @click="dialogVisible = true">+新建</el-button>
          </el-col>
        </el-row>
        <!-- 表单区域 -->
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="45"
          />
          <el-table-column
            prop="name"
            label="店铺名称"
            width="80"
          >
          <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
          </el-table-column>
          <el-table-column
            prop="industry"
            label="行业"
            width="80"
          />
          <el-table-column
            prop="address"
            label="地址"
            width="80"
          />
          <el-table-column
            prop="phone"
            label="电话"
            width="80"
            show-overflow-tooltip
          />
          <el-table-column
            prop="promoters"
            label="推广人名称"
            width="90"
            show-overflow-tooltip
          />
          <el-table-column
            prop="level"
            label="权益级别"
            width="90"
            show-overflow-tooltip
          />
          <el-table-column
            prop="prescription"
            label="权益时效"
            width="90"
            show-overflow-tooltip
          />
          <el-table-column
            prop="achievement"
            label="销售额"
            width="90"
            show-overflow-tooltip
          />
          <el-table-column
            prop="condition"
            label="状态"
            width="80"
          />
          <el-table-column
            prop="nature"
            label="性质"
            width="80"
          />
          <el-table-column
            prop="remarks"
            label="备注"
            width="80"
          />
          <el-table-column

            prop="operation"
            label="操作"
            width="300"
          >
            <template #default="{row}">
              <el-button type="text" size="mini" @click="details(row)">详情</el-button>
              <el-button type="text" size="mini">查看商品</el-button>
              <el-button type="text" size="mini">经营分析</el-button>
              <el-button type="text" size="mini">启用/停用</el-button>
              <el-button type="text" size="mini" @click="delData(row.id)">删除</el-button>
              <el-button type="text" size="mini" @click="edit(row)">编辑</el-button>
            </template>
          </el-table-column>

        </el-table>
        <!-- 分页区域 -->
        <el-pagination
          :current-page="page._page"
          :page-sizes="[5,6,10]"
          :page-size="page._limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
      <!-- 弹出窗口 -->
      <el-dialog
        title="添加店铺"
        :visible.sync="dialogVisible"
        :before-close="handleClose"
        width="70%"
      >
        <!-- 中间表单内容 -->
        <el-tabs v-model="activeName">
          <el-tab-pane label="基础信息" class="intermediate" name="first">
            <el-row>
              <el-col :span="12">
                <!-- 第一块区域 -->
                <el-form ref="roleform" :model="sizeForm1" :rules="rules" label-width="80px" size="mini">
                  <el-form-item label="店铺名称" prop="name">
                    <el-input v-model="sizeForm1.name" />
                  </el-form-item>
                  <el-form-item label="分店名称" prop="branch">
                    <el-input v-model="sizeForm1.branch" />
                  </el-form-item>
                  <el-form-item label="所属行业" class="selecter">
                    <el-select v-model="sizeForm1.region" placeholder="请选择">
                      <el-option label="行业一" value="愚者" />
                      <el-option label="行业二" value="智者" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="身份证号" prop="identity">
                    <el-input v-model="sizeForm1.identity" />
                  </el-form-item>
                  <el-form-item label="所属邮箱" prop="email">
                    <el-input v-model="sizeForm1.email" />
                  </el-form-item>
                  <el-form-item label="地址" prop="address">
                    <el-input v-model="sizeForm1.address" />
                  </el-form-item>
                  <el-form-item label="电话" prop="phone">
                    <el-input v-model="sizeForm1.phone" />
                  </el-form-item>
                  <el-form-item label="营业时间">
                    <el-time-select
                      v-model="startTime"
                      class="times"
                      placeholder="起始时间"
                      size="mini"
                      :picker-options="{
                        start: '08:30',
                        step: '00:15',
                        end: '18:30'

                      }"
                    />
                    <el-time-select
                      v-model="endTime"
                      class="timess"
                      placeholder="结束时间"
                      size="mini"
                      :picker-options="{
                        start: '08:30',
                        step: '00:15',
                        end: '18:30',
                        minTime: startTime
                      }"
                    />
                  </el-form-item>
                  <el-form-item label="单选">
                    <el-radio-group v-model="sizeForm1.resource" size="medium">
                      <el-radio border label="独立经营" />
                      <el-radio border label="共享经营" />
                    </el-radio-group>
                  </el-form-item>
                  <!-- 图片文件等上传处 -->
                  <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"

                    list-type="picture"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                  </el-upload>
                  <el-upload
                    class="upload-demo2"
                    drag
                    action="https://jsonplaceholder.typicode.com/posts/"
                    multiple
                  >
                    <i class="el-icon-upload" />
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                  </el-upload>
                </el-form>
              </el-col>
              <!-- 第二块区域 -->
              <el-col :span="12" style="display:flex;top:0;flex-direction:column">
                <span>店铺头像：</span>
                <el-upload
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  style="margin-left:70px;margin-top:-15px"
                >
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
                <span>营业执照：</span>
                <el-upload
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  style="margin-left:70px;margin-top:-15px"
                >
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
                <span>上传证件：</span>
                <el-upload
                  style="margin-left:70px;margin-top:-15px"
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
                <span>店铺实拍：</span>
                <el-upload
                  style="margin-left:70px;margin-top:-15px"
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
                <!-- 上传文件 -->
                <el-upload
                  class="upload-demo2"
                  drag
                  action="https://jsonplaceholder.typicode.com/posts/"
                  multiple
                >
                  <i class="el-icon-upload" />
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </el-col>
            </el-row>
          </el-tab-pane>

          <!-- ----------------------------- -->

          <el-tab-pane label="配送方式" name="second" class="intermediate2">
            <el-row>
              <el-col :span="12">
                <!-- 第一块区域 -->
                <el-form ref="form" :model="sizeForm2" label-width="80px" size="mini">
                  <el-form-item label="是否到店">
                    <el-radio-group v-model="sizeForm2.once" size="medium">
                      <el-radio border label="选项一" />
                      <el-radio border label="选项二" />
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="是否支持同城配送">
                    <el-radio-group v-model="sizeForm2.twice" size="medium">
                      <el-radio border label="选项一" />
                      <el-radio border label="选项二" />
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="起配费用">
                    <el-input v-model="sizeForm2.initial" />
                  </el-form-item>
                  <el-form-item label="每公里/元">
                    <el-input v-model="sizeForm2.pkm" />
                  </el-form-item>
                  <el-form-item label="配送时间">

                    <el-time-select
                      v-model="startTime"
                      class="time1"
                      placeholder="起始时间"
                      size="mini"
                      :picker-options="{
                        start: '08:30',
                        step: '00:15',
                        end: '18:30'

                      }"
                    />
                    <el-time-select
                      v-model="endTime"
                      class="time2"
                      placeholder="结束时间"
                      size="mini"
                      :picker-options="{
                        start: '08:30',
                        step: '00:15',
                        end: '18:30',
                        minTime: startTime
                      }"
                    />
                  </el-form-item>

                </el-form>
              </el-col>
              <!-- 第二块区域 -->
              <el-col :span="12">
                <el-form>
                  <el-form-item label="是否支持区域配送">
                    <el-radio-group v-model="sizeForm2.third" size="medium">
                      <el-radio border label="选项一" />
                      <el-radio border label="选项二" />
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="起配费用">
                    <el-input v-model="sizeForm2.firstmoney" />
                  </el-form-item>
                  <el-form-item label="每公里/元">
                    <el-input v-model="sizeForm2.everykm" />
                  </el-form-item>
                  <el-form-item label="配送范围/公里">
                    <el-input v-model="sizeForm2.anywhere" />
                  </el-form-item>
                  <el-form-item label="跨域每公里/元">
                    <el-input v-model="sizeForm2.howfar" />
                  </el-form-item>
                  <el-form-item label="配送时间">

                    <el-time-select
                      v-model="startTime"
                      class="time1"
                      placeholder="起始时间"
                      size="mini"
                      :picker-options="{
                        start: '08:30',
                        step: '00:15',
                        end: '18:30'

                      }"
                    />
                    <el-time-select
                      v-model="endTime"
                      class="time2"
                      placeholder="结束时间"
                      size="mini"
                      :picker-options="{
                        start: '08:30',
                        step: '00:15',
                        end: '18:30',
                        minTime: startTime
                      }"
                    />
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
        <!-- 尾部确定取消按键 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeData">取 消</el-button>
          <el-button type="primary" @click="addList">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getShopList, delData, addShopList, modifyData } from '@/api/user';
export default {
  data() {
    const validatePhone = (rule, value, callback) => {
      var phone = value.replace(/\s/g, '');// 去除空格
      // 校验手机号，号段主要有(不包括上网卡)：130~139、150~153，155~159，180~189、170~171、176~178。14号段为上网卡专属号段
      const regs = /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/;
      if (value.length === 0) {
        callback();
      } else {
        if (!regs.test(phone)) {
          callback([new Error('手机号输入不合法')]);
        } else {
          callback();
        }
      }
    };
    return {
      imageUrl: '',
      // 表单校验
      rules: { address: [{ required: true, message: '地址不能为空', trigger: 'blur' }], name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }], phone: [{ required: true, trigger: 'blur', message: '手机号不能为空' }, { validator: validatePhone, trigger: 'blur' }] },
      row: '',
      // 店铺名
      input: '',
      startTime: '',
      endTime: '',
      // 新增按钮里第一页的数据
      sizeForm1: {
        id: '',
        name: '',
        branch: '',
        identity: '',
        email: '',
        resource: '',
        address: '',
        phone: '',
      },
      // 新增按钮里第二页的数据
      sizeForm2: {
        once: '',
        twice: '',
        initial: '',
        pkm: '',
        third: '',
        firstmoney: '',
        everykm: '',
        anywhere: '',
        howfar: '',
      },
      activeName: 'first',
      dialogVisible: false,
      // 行业
      options: [{ value: '1', label: 'sbcmw' }, { value: '2', label: 'sbxyc' }, { value: '3', label: 'sbcj' }],
      value: '',
      // 表单数据
      tableData: [{

      }],
      c: {},
      multipleSelection: [],
      page: {
        _page: 2,
        _limit: 5,
        total: 13,

      },
    };
  },
  async created() {
    this.getShopList();
    const res = await getShopList();
    this.page.total = res.data.length;
  },

  methods: {
    // 详情
    details(data) {
      this.sizeForm1 = { ...data };
      this.dialogVisible = true;
    },
    // 编辑数据
    edit(data) {
      this.sizeForm1 = { ...data };
      this.dialogVisible = true;
    },
    //
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 获取最新的页码
    handleCurrentChange(newPage) {
      this.page._page = newPage;
      this.getShopList();
    },
    handleSizeChange(newSize) {
      this.page._limit = newSize;
      this.getShopList();
    },
    // 弹出表单右上角关闭
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
          this.sizeForm1 = {
            id: '',
            name: '',
            branch: '',
            identity: '',
            email: '',
            resource: '',
            address: '',
            phone: '',
          };
          this.$refs.roleform.clearValidate();
        })
        .catch(_ => {});
    },
    // 获取数据
    async getShopList() {
      // const data = await getShopList();
      const data = await getShopList(this.page);
      // this.page.limit = _limit;
      // this.page.page = _page;
      // console.log(data);
      this.tableData = data.data;
      // console.log(data.data);
    },
    // 删除数据
    async delData(id) {
      try {
        await this.$confirm('确定删除吗？');
        await delData(id);

        const res = await getShopList();
        this.getShopList();
        this.page.total = res.data.length;
        this.$message.success('删除成功!');
      } catch (error) {
        console.log(error);
      }
    },
    // 新增and编辑数据
    async addList() {
      if (this.sizeForm1.id !== '') {
        const res = await modifyData({ name: this.sizeForm1.name, phone: this.sizeForm1.phone, address: this.sizeForm1.address }, this.sizeForm1.id);
        console.log(res);
      } else {
        await addShopList(this.sizeForm1);
        const res = await getShopList();
        this.page.total = res.data.length;
      }

      this.getShopList();
      this.sizeForm1 = {
        id: '',
        name: '',
        branch: '',
        identity: '',
        email: '',
        resource: '',
        address: '',
        phone: '',
      };
      this.$refs.roleform.clearValidate();
      this.dialogVisible = false;
    },
    // 取消数据
    closeData() {
      this.sizeForm1 = {
        id: '',
        name: '',
        branch: '',
        identity: '',
        email: '',
        resource: '',
        address: '',
        phone: '',
      };
      this.$refs.roleform.clearValidate();
      this.dialogVisible = false;
    },
    // 查询
    async search() {
      if (this.input === '') {
        this.getShopList();
        return;
      }
      const res = await getShopList({ name: this.input });
      console.log(res);
      this.tableData = res.data;
    },
    // 上传照片
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style lang="scss">
.app-main{
  background-color: #f0f2f5;
.container{
  margin: 10px 10px 0 10px;
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .top{

  height: 40px;
  .el-breadcrumb{
    margin-top: -8px;
  }

}
.top1{
    margin-top: 10px;
    position: relative;
    .nav1{
      position: absolute;
      top: 10px;
      left: 0;
    }
    .nav2{
    margin-top: 15px;

    .el-input{
    width:70%;

     }
     .input{

 .el-input--suffix{
    width: 100%;
    .el-input__inner{
      height: 31px;
    }
  }
 }

}
   .nav3{

    //  margin-left: -5px;
    .el-col{
      margin: 8px 0 0 10px;
    }

   }
  }

  //
  .intermediate{
    .times{
      width: 30%!important;
      margin-right: 20px;
    }
    .timess{
      width:30%!important;
    }
    .el-input{
      width:85%
    }
    .selecter{
      .el-input{
        width: 100%;
      }
    }
  }
  .intermediate2{
    .el-input{
      width: 75%;
.el-input__inner{
  height: 31px;
}
    }

    .time1{
      width: 30%;
      margin-right: 20px;
    }
    .time2{
      width:30%
    }
  }
}

}

</style>
